<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" :size="formSize" status-icon >
        <el-descriptions :column="3" border size="small">
            <el-descriptions-item label="申请人"><el-text>{{ user.name }}</el-text></el-descriptions-item>
            <el-descriptions-item label="申请部门"><component :is="userRoleSelect" :data=user.id @onRoleSelect="onRoleSelect" /></el-descriptions-item>
            <el-descriptions-item label="申请日期"><el-text>{{ ruleForm.apply_date }}</el-text></el-descriptions-item>
            <el-descriptions-item label="申请金额"><el-input v-model="ruleForm.apply_price" /></el-descriptions-item>
            <el-descriptions-item label="稽核金额"><el-input v-model="ruleForm.audit_price" /></el-descriptions-item>
            <el-descriptions-item label="还借支"><el-input v-model="ruleForm.back_borrow" /></el-descriptions-item>
            <el-descriptions-item label="实付金额"><el-input v-model="ruleForm.price" /></el-descriptions-item>
            <el-descriptions-item label="对方性质">
                <el-select v-model="ruleForm.nature">
                    <el-option label="内部员工报销" value="内部员工报销" />
                    <el-option label="供应商付款" value="供应商付款" />
                    <el-option label="劳务付款" value="劳务付款" />
                    <el-option label="临时工付款" value="临时工付款" />
                    <el-option label="保证金" value="保证金" />
                    <el-option label="其它" value="其它" />
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="支付方式">
                <el-select v-model="ruleForm.pay_type">
                    <el-option label="对公转账" value="对公转账" />
                    <el-option label="对私转账" value="对私转账" />
                    <el-option label="数字人民币" value="数字人民币" />
                    <el-option label="电子货币" value="电子货币" />
                    <el-option label="现金支票" value="现金支票" />
                    <el-option label="其它" value="其它" />
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="支付公司">
                <el-select v-model="ruleForm.pay_company">
                    <el-option label="华靖" value="华靖" />
                    <el-option label="华雨" value="华雨" />
                    <el-option label="博创" value="博创" />
                    <el-option label="瑞智腾" value="瑞智腾" />
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="银行手续费"><el-input v-model="ruleForm.bank_charges" /></el-descriptions-item>
            <!-- <el-descriptions-item label="收款方式"><el-input v-model="ruleForm.receive_type" /></el-descriptions-item> -->
        </el-descriptions>
        <h4 class="text-center mt10">收款账号</h4>
        <el-descriptions class="mt10" :column="2" border size="small">
            <el-descriptions-item label="账号名称"><el-input v-model="ruleForm.name" /></el-descriptions-item>
            <el-descriptions-item label="开户行"><el-input v-model="ruleForm.bank" /></el-descriptions-item>
            <el-descriptions-item label="账号"><el-input v-model="ruleForm.bank_number" /></el-descriptions-item>
            <el-descriptions-item label="行号"><el-input v-model="ruleForm.bank_no" /></el-descriptions-item>
            <el-descriptions-item label="备注"><el-input v-model="ruleForm.remarks" type="textarea" :autosize="{ minRows: 4 }" /></el-descriptions-item>
        </el-descriptions>


        <div class="text-right mt10"><el-button size="small" type="primary" @click="onInsert">添加</el-button></div>
        <el-table :data="tableData" border show-summary style="width: 100%;height: 200px !important;">
            <el-table-column label="费用科目" show-overflow-tooltip>
                <template #default="scope">
                    <el-input size="small" v-model="scope.row.title" />
                </template>
            </el-table-column>
            <el-table-column label="分摊类型" show-overflow-tooltip>
                <template #default="scope">
                    <el-input size="small" v-model="scope.row.type" />
                </template>
            </el-table-column>
            <el-table-column label="费用承担项目" show-overflow-tooltip>
                <template #default="scope">
                    <el-input size="small" v-model="scope.row.project" />
                </template>
            </el-table-column>
            <el-table-column label="项目状态" show-overflow-tooltip>
                <template #default="scope">
                    <el-input size="small" v-model="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column label="费用承担部门" show-overflow-tooltip>
                <template #default="scope">
                    <el-input size="small" v-model="scope.row.role" />
                </template>
            </el-table-column>
            <el-table-column label="单位" show-overflow-tooltip>
                <template #default="scope">
                    <el-input size="small" v-model="scope.row.unit" />
                </template>
            </el-table-column>
            <el-table-column label="数量" show-overflow-tooltip>
                <template #default="scope">
                    <el-input size="small" v-model="scope.row.nums" />
                </template>
            </el-table-column>
            <el-table-column label="申请金额" show-overflow-tooltip>
                <template #default="scope">
                    <el-input size="small" v-model="scope.row.apply_price" />
                </template>
            </el-table-column>
            <el-table-column label="稽核金额" show-overflow-tooltip>
                <template #default="scope">
                    <el-input size="small" v-model="scope.row.audit_price" />
                </template>
            </el-table-column>
        </el-table>
        <el-descriptions :column="4" border size="small">
            <el-descriptions-item label="项目部：(实际申请人）"><el-text>{{ user.name }}</el-text></el-descriptions-item>
            <el-descriptions-item label="综合管理部">--</el-descriptions-item>
            <el-descriptions-item label="总经理">--</el-descriptions-item>
            <el-descriptions-item label="会计">--</el-descriptions-item>
        </el-descriptions>

    </el-form>
    <el-divider />
    <div class="text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref,watch } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import http from '../../../../util/request';
import userRoleSelect from "@/components/userRoleSelect.vue";
const loading = ref<boolean>(false)
let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)

interface RuleForm {
    id:number
    type: string
    model: string
    source_id: number
    source_type: string
    reason: string
    payment_type: string
    pay_info: string

    role_id:number
    user_id:number
    apply_date: string
    apply_price: number
    back_borrow: number
    audit_price: number
    nature: string
    pay_type:string
    price: number
    receive_type: string
    details:any
    pay_company: string
    bank_charges: string
    name: string
    bank: string
    bank_number: string
    bank_no: string
    remarks: string
}
const material = ref<any>({})
const formSize = ref<ComponentSize>('small')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id:0,
    type:'',
    model:'',
    source_id: 0,
    source_type: 'material',
    reason: '/',
    price: 0,
    payment_type: '',
    pay_info: '',

    role_id:0,
    user_id:0,
    apply_date: '',
    apply_price: 0,
    back_borrow: 0,
    audit_price: 0,
    nature: '/',
    pay_type:'/',
    receive_type: '/',
    details:'',
    pay_company: '/',
    bank_charges: '/',
    name: '/',
    bank: '/',
    bank_number: '/',
    bank_no: '/',
    remarks: '/',
})


interface Details {
    title:string
    type:string
    project:string
    status:string
    unit:string
    nums:number
    role:string
    apply_price:number
    audit_price:number
}

const Details = ref<Details>({
    title:'/',
    type:'/',
    project:'/',
    status:'/',
    unit:'/',
    nums:0,
    role:'/',
    apply_price:0,
    audit_price:0
})

const tableData = ref<Details[]>([])


const onGetData = () => {
    http.get('/material/'+ruleForm.value.source_id).then((response:any)=>{
        material.value = response.data.data
        ruleForm.value.apply_date =  response.data.data.date
    })
}

const props = defineProps<{
    data:any,
    type:string
    model:string
}>()

watch(props,()=>{
    ruleForm.value.source_id = props.data
    ruleForm.value.type = props.type
    ruleForm.value.model = props.model
    ruleForm.value.reason = '/',
    ruleForm.value.price = 0,
    ruleForm.value.payment_type = '/',
    ruleForm.value.pay_info = '/'
    onGetData()
},{ immediate: true })

const rules = reactive<FormRules<RuleForm>>({
    reason: [
        { required: true, message: '请输入付款原因说明', trigger: 'blur' }
    ],
    payment_type: [
        { required: true, message: '请输入付款方式', trigger: 'blur' }
    ],
    pay_info: [
        { required: true, message: '请输入收款方信息', trigger: 'blur' }
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            ruleForm.value.details = JSON.stringify(tableData.value)
            if(ruleForm.value.id){
                request = http.patch('/paymentApply',ruleForm.value)
            }else{
                request = http.put('/paymentApply',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                onSave()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const onInsert = () => {
    let data:string = JSON.stringify(Details.value)
    tableData.value.push(JSON.parse(data))
}

const onSave = () => {
    emit('onSave')
}

const emit = defineEmits(['onSave'])

const onRoleSelect = (id:number) => {
    ruleForm.value.role_id = id
}
</script>
<style scoped>
</style>
